<template>
   <div class="container" >
        <section class="top">
         <RouterView name="top"></RouterView>
        </section>
        <section class="tr">
          <nav class="left-menu" style="background-color: #d8e4eb;">
            <RouterView name="menu"></RouterView>
            </nav>
            <article class="right-contents">
                <RouterView></RouterView>
            </article>
        </section>
    </div>
</template>
<script>
   export default {
     name: '',
     data: function(){
       return {
       }
     },
     methods:{
       
     }
   }
</script>
<style>
  html,
  body, 
  #app{
    height: 100%;
  }
</style>
<style scoped>
   .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      padding-right: 0px;
    padding-left: 0px;
   }
   .top{
    width: 100%;
    flex-basis: 50px;
    background:url("../assets/tp.jpg");
   }
   .tr{
      width: 100%;
      flex-grow: 1;
      display: flex;
      flex-direction: row;
    }
   .left-menu{
    /* width: 71px;
    height: 250px;
    margin-top: 30px; */
    flex-basis: 100px;
    /* background-color: #CCEEFF; */
    display: flex;
    flex-direction: column;
    border: 1px solid #d2d5d5;
   }
   .right-contents{
    flex-grow: 1;
    background-color: #ffffff;
   }
</style>